<template>
	<view class="content">
		<view class="title">1.单选，过滤</view>
		<lu-data-select placeholder="请选择数据" :options="selectData" v-model="condition1" :multiple="false" :filterable="true" @change="onchange"></lu-data-select>

		<view class="title">2.单选，过滤，change返回对象格式</view>
		<lu-data-select placeholder="请选择数据" :options="selectData" v-model="condition1" filterable changeType="objectValue" @change="onchange"></lu-data-select>

		<view class="title">3.多选，过滤</view>
		<lu-data-select placeholder="请选择数据" :options="selectData" v-model="condition" :filterable="true" :multiple="true" @change="onchange"></lu-data-select>

		<view class="title">4.多选，过滤，change返回对象格式</view>
		<lu-data-select
			placeholder="请选择数据"
			:options="selectData"
			v-model="condition"
			:filterable="true"
			:multiple="true"
			changeType="objectValue"
			@change="onchange"
		></lu-data-select>

		<view class="title">5.自定义空数据插槽</view>
		<lu-data-select placeholder="请选择数据" :options="selectData1" v-model="condition" :multiple="true" :clearable="true" :filterable="true" @change="onchange">
			<template #empty>
				<view style="text-align: center; padding: 20rpx; color: #f00">空数据插槽</view>
			</template>
		</lu-data-select>
		<view class="title">6.自动判断弹出方向，演示，无需配置</view>
		<lu-data-select placeholder="请选择数据" :options="selectData" v-model="condition" :multiple="true" :clearable="true" :filterable="true" @change="onchange">
			<template #empty>
				<view style="text-align: center; padding: 20rpx; color: #f00">空数据插槽</view>
			</template>
		</lu-data-select>

		<view class="title">7.边框，css的border属性，单选模式选择框高度height，多选默认自动增高，选项过长是否显示省略号</view>
		<lu-data-select
			placeholder="请选择数据"
			:options="selectData"
			v-model="condition1"
			:multiple="false"
			:filterable="true"
			:showEllipsis="false"
			height="100rpx"
			border="1px solid #f00"
			@change="onchange"
		></lu-data-select>

		<view class="title">8.禁用选择</view>
		<lu-data-select placeholder="请选择数据" disabled :options="selectData" v-model="condition1"></lu-data-select>

		<view class="title">9.折叠选中，多选有效</view>
		<lu-data-select
			placeholder="请选择数据"
			collapseTags
			:collapse-tags-num="2"
			:options="selectData"
			v-model="condition"
			:filterable="true"
			:multiple="true"
			@change="onchange"
		></lu-data-select>

		<view class="title">10.选项插槽，插槽 option：选项内容，$index：当前选项下标</view>
		<lu-data-select placeholder="请选择数据" :options="selectData" multiple v-model="condition">
			<template #option="{ row, $index }">
				<view style="color: #e39076" class="">{{ $index }}. {{ row.label }}</view>
			</template>
		</lu-data-select>
		<!-- 		<view class="title">11.开启虚拟列表</view>
		<lu-data-select placeholder="请选择数据" :virtualList="true" :options="dataList" v-model="value" :multiple="true" :filterable="true" @change="onchange"></lu-data-select> -->
	</view>
</template>

<script setup>
import { ref, watch } from 'vue';
const condition1 = ref('8');
const condition2 = ref('8');
const condition = ref(['7']); //多选必须是数组格式
const list = new Array(10000).fill().map((item, i) => {
	return {
		value: i + 1,
		label: '选项' + (i + 1)
	};
});
// const value = ref(999);
const value = ref([55]);
const dataList = ref([]);
dataList.value = list;
const selectData1 = ref([
	{
		value: '1',
		label: '测试标题测试标题测试标题测试标题测试标题测试标题测试标题1'
	}
]);
const selectData = ref([
	{
		value: '1',
		label: '测试标题测试标题测试标题测试标题测试标题测试标题测试标题1'
	},
	{
		value: '2',
		label: '数据2',
		disabled: true
	},
	{
		value: '3',
		label: '数据3',
		disabled: false
	},
	{
		value: '4',
		label: '数据4',
		disabled: true
	},
	{
		value: '5',
		label: '数据5'
	},
	{
		value: '6',
		label: '数据6'
	},
	{
		value: '7',
		label: '数据7'
	},
	{
		value: '8',
		label: '数据8'
	},
	{
		value: '9',
		label: '数据9'
	},
	{
		value: '10',
		label: '数据10'
	},
	{
		value: '11',
		label: '数据数据数据数据数据数据数据数据数据数据数据数据数据11'
	},
	{
		value: '12',
		label: '数据12'
	},
	{
		value: '13',
		label: '数据列表13'
	}
]);
const onchange = (e) => {
	console.log(e);
};
</script>
<style lang="scss" scoped>
.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.content {
	padding: 20px;

	.title {
		padding: 10px 0;
	}
}
</style>